import React, { Component } from 'react';
import Swiper from 'swiper/dist/js/swiper';
import { Card } from 'antd';
import 'swiper/dist/css/swiper.min.css';
import './style.scss';

export default class UiSwiper extends Component {
  state = {
    imgList: [
      {
        id: 1,
        src: 'public/image/login.jpg'
      },
      {
        id: 2,
        src: 'public/image/login.jpg'
      },
      {
        id: 3,
        src: 'public/image/login.jpg'
      }
    ]
  };

  componentDidMount() {
    new Swiper('.swiper-container', {
      loop: true,
      effect: 'coverflow',
      pagination: {
        el: '.swiper-pagination',
      },
    });
  }

  render() {
    return (
      <Card title="轮播图">
        <div className="swiper-container">
          <div className="swiper-wrapper">
            { this.state.imgList.map((item, index) => (
              <div className="swiper-slide" key={item.id}>
                <img src={item.src} alt={index} />
              </div>
            ))}
          </div>
          <div className="swiper-pagination" />
        </div>
      </Card>
    );
  }
}
